<template>
    <div class="aboutMain">
        <nav>
            <RouterLink to="/video">
                <ul>
                    <li class="hot">#热门#</li>
                    <li class="scienceFiction">#科幻#</li>
                    <li class="anime">#动漫#</li>
                    <li class="game">#游戏#</li>
                    <li class="Inspirational">#励志#</li>
                    <li class="funny">#搞笑#</li>
                </ul>
            </RouterLink>
        </nav>
        <!-- <ul>
            <li class="hot">#热门#</li>
            <li class="scienceFiction">#科幻#</li>
            <li class="anime">#动漫#</li>
            <li class="game">#游戏#</li>
            <li class="Inspirational">#励志#</li>
            <li class="funny">#搞笑#</li>
        </ul> -->
    </div>
</template>

<style scoped>
.aboutMain{
    background-image: url("https://ts1.cn.mm.bing.net/th/id/R-C.22a1591edeb915e0ba09e36f32a66379?rik=croOpxupPxRViA&riu=http%3a%2f%2fdl.bbs.9game.cn%2fattachments%2fforum%2f201708%2f01%2f164416q7t2j11pt7ffmjjk.gif&ehk=iGzRTz3jLbRsB2j2QzKm9FB1KuAqhF9hn68ch3mtGUw%3d&risl=&pid=ImgRaw&r=0");
    background-size: cover;
    width: 100%;
    height: 100vh;
    padding-top: 80px;
}
.hot{
    background-image: url("https://x0.ifengimg.com/ucms/2022_46/E45FC7F130C27BDF2B513347A9234566FDA8CBEF_size72_w690_h388.jpg");
    background-size: cover; 
}
.scienceFiction{
    background-image: url("https://img.zcool.cn/community/0124e05c47fa99a801203d22e36935.jpg@1280w_1l_2o_100sh.jpg");
    background-size: cover; 
}
.anime{
    background-image: url("https://img3.jiemian.com/101/original/20230208/167582622074614500_a700x398.jpg");
    background-size: cover;
}
.game{
    background-image: url("https://pic1.zhimg.com/v2-dde12bba7f2b552fd83a8bf73952441b_qhd.jpg");
    background-size: cover;
}
.Inspirational{
    background-image: url("https://ts1.cn.mm.bing.net/th/id/R-C.e42c9c43f2260e36d394d5a1f352734e?rik=uyoYmiyCOUGbXQ&riu=http%3a%2f%2fi.gtimg.cn%2fqqlive%2fimg%2fjpgcache%2ffiles%2fqqvideo%2fm%2fmhl665xf8ina3t2.jpg&ehk=%2fNRTRoflYB6BHJs9wnKwsgxXXnEQjFr6R6u88AQFWyU%3d&risl=&pid=ImgRaw&r=0");
    background-size: cover;
}
.funny{
    background-image: url("https://ts1.cn.mm.bing.net/th/id/R-C.a322df0a8508dc58d35c48a6060141a2?rik=IC15BxG0sWOY6Q&riu=http%3a%2f%2fi.gtimg.cn%2fqqlive%2fimg%2fjpgcache%2ffiles%2fqqvideo%2f9%2f9n30k2ayqn1f063.jpg&ehk=mdRFk22zub%2bpPco7XQHmBfX96grz9LCmcEQ1lDgtlGo%3d&risl=&pid=ImgRaw&r=0");
    background-size: cover; 
}
div{
    width: 100%;
    height: 90vh;
    /* background-color: antiquewhite; */
}
ul{
    width: 80%;
    height: 100%;
    margin-left: 10%;
    /* background-color: aquamarine; */
}
li{
    color: white;
    font-size: 26px;
    font-weight: bold;
    list-style: none;
    float: left;
    display: block;
    width: 30%;
    height: 44vh;
    margin: 10px;
    line-height: 44vh;
    text-align: center;
    /* background-color: aqua; */
}
</style>